﻿<style>
    /* START Material Symbols font CSS */

    @@font-face {
        font-family: 'Material Symbols Rounded';
        font-style: normal;
        font-weight: 100 700;
        src: url('fonts/MaterialSymbolsRounded.woff2') format('woff2');
    }

    .material-symbols-rounded {
        --rz-icon-font-family: 'Material Symbols Rounded';
    }

    /* END Material Symbols font CSS */
</style>
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" class="rz-m-12" Style="--rz-icon-size: 2rem;">
    <div style="width: 200px">Material Symbols (default)</div>
    <RadzenIcon Icon="home" style="font-weight: 100;"/>
    <RadzenIcon Icon="home" style="font-weight: 200;"/>
    <RadzenIcon Icon="home" style="font-weight: 300;"/>
    <RadzenIcon Icon="home" style="font-weight: 400;"/>
    <RadzenIcon Icon="home" style="font-weight: 500;"/>
    <RadzenIcon Icon="home" style="font-weight: 600;"/>
    <RadzenIcon Icon="home" style="font-weight: 700;"/>
</RadzenStack>

<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" class="material-symbols-rounded rz-m-12" Style="--rz-icon-size: 2rem;">
    <div style="width: 200px">Material Symbols Rounded</div>
    <RadzenIcon Icon="home" style="font-weight: 100;"/>
    <RadzenIcon Icon="home" style="font-weight: 200;"/>
    <RadzenIcon Icon="home" style="font-weight: 300;"/>
    <RadzenIcon Icon="home" style="font-weight: 400;"/>
    <RadzenIcon Icon="home" style="font-weight: 500;"/>
    <RadzenIcon Icon="home" style="font-weight: 600;"/>
    <RadzenIcon Icon="home" style="font-weight: 700;"/>
</RadzenStack>